<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<!--
* Copyright 2010-2011 Research In Motion Limited.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div data-bb-type="screen" data-bb-effect="slide-left">
	<div data-bb-type="title" data-bb-caption="DropDown Interface" data-bb-back-caption="Back" ></div>
	<script id="dynamicDropDownsJS" src="js/dynamicDropDowns.js"></script>
	
	<div data-bb-type="round-panel"> 
		<div data-bb-type="panel-header">Manipulate DropDown states  </div>
		<table width="100%">
			<tr>
				<td width="50%">
					<select id="visibility" data-bb-label="Visibility:">
						<option value="1" selected="true">One</option>
						<option value="2">Two</option>
					</select>
				</td>
				<td width="50%">
					<table style="float:right">
						<tr>
							<td>Visible:</td>
							<td><input type="checkbox" checked="true" onchange="if (this.checked){ document.getElementById('visibility').show();} else { document.getElementById('visibility').hide();}" /></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td width="50%">
					<select id="state" data-bb-label="State:">
						<option value="1" selected="true">One</option>
						<option value="2">Two</option>
					</select>
				</td>
				<td width="50%">
					<table style="float:right">
						<tr>
							<td>Enabled:</td>
							<td><input type="checkbox" checked="true" onchange="if (this.checked){ document.getElementById('state').enable();} else { document.getElementById('state').disable();}" /></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</div>
	
	<div data-bb-type="round-panel"> 
		<div data-bb-type="panel-header">Get/Set DropDown Caption</div>
		<table width="100%;">
			<tr>
				<td style="padding-left:20px;width:70%;"><input id="caption" type="text" placeholder="Enter button caption"/></td>
				<td><div data-bb-type="button" data-bb-style="stretch" onclick="document.getElementById('captionTarget').setCaption(document.getElementById('caption').value);">Apply</div></td>
			</tr>
		</table>
		<select id="captionTarget" data-bb-label="My Caption:">
			<option value="1" selected="true">One</option>
			<option value="2">Two</option>
		</select>
		<div data-bb-type="button" data-bb-style="stretch" onclick="alert(document.getElementById('captionTarget').getCaption());">Get Caption</div>
	</div>
	
	<div data-bb-type="round-panel"> 
		<div data-bb-type="panel-header">Create/Remove DropDowns</div>
		<div data-bb-type="button" data-bb-style="stretch" onclick="addDropDown()">Add DropDown</div>
		<div id="dropdownContainer">
		</div>
	</div>
	
	<div data-bb-type="round-panel"> 
		<div data-bb-type="panel-header">Change DropDown Items</div>
		<div data-bb-type="button" data-bb-style="stretch" onclick="addDropDownOption()">Add Item</div>
		<select id="refreshTarget" data-bb-label="My Caption:">
			<option value="1">1</option>
			<option value="2">2</option>
		</select>
	</div>
	
	<div data-bb-type="round-panel"> 
		<div data-bb-type="panel-header">Select Item By Index</div>
		<div data-bb-type="button" data-bb-style="stretch" onclick="document.getElementById('indexTarget').setSelectedItem(1);">Select Index</div>
		<select id="indexTarget" data-bb-label="My Caption:">
			<option value="1" selected="true">One</option>
			<option value="2">Two</option>
		</select>
	</div>
	
	<div data-bb-type="round-panel"> 
		<div data-bb-type="panel-header">Select Item By Text</div>
		<div data-bb-type="button" data-bb-style="stretch" onclick="document.getElementById('textTarget').setSelectedText('Two');">Select Text</div>
		<select id="textTarget" data-bb-label="My Caption:">
			<option value="1" selected="true">One</option>
			<option value="2">Two</option>
		</select>
	</div>
	
	<div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>
